<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%>
<%@ taglib uri="page" prefix="p"%>
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="icon" href="../../favicon.ico">

    <title>普通表格,刷新页面</title>
	
    <!-- Bootstrap core CSS -->
    <link href="${pageContext.request.contextPath}/res/plugins/bootstrap/css/bootstrap.min.css" rel="stylesheet">

    <!-- Custom styles for this template -->
    <link href="${pageContext.request.contextPath}/res/css/navbar-fixed-top.css" rel="stylesheet">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/res/css/common.css">

    <!-- Just for debugging purposes. Don't actually copy these 2 lines! -->
    <!--[if lt IE 9]>

    <![endif]-->


    <link rel="stylesheet" href="${pageContext.request.contextPath}/res/plugins/select2/css/select2.css">


  </head>

  <body>
  	
	
    <!-- Fixed navbar -->
    <nav class="navbar navbar-default navbar-fixed-top">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="#">Project name</a>
        </div>
        <div id="navbar" class="navbar-collapse collapse">
          <ul class="nav navbar-nav">
            <li class="active"><a href="#">Home</a></li>
            <li><a href="#about">About</a></li>
            <li><a href="#contact">Contact</a></li>
            <li class="dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
              <ul class="dropdown-menu">
                <li><a href="#">Action</a></li>
                <li><a href="#">Another action</a></li>
                <li><a href="#">Something else here</a></li>
                <li role="separator" class="divider"></li>
                <li class="dropdown-header">Nav header</li>
                <li><a href="#">Separated link</a></li>
                <li><a href="#">One more separated link</a></li>
              </ul>
            </li>
          </ul>
          <ul class="nav navbar-nav navbar-right">
            <li><a href="../navbar/">Default</a></li>
            <li><a href="../navbar-static-top/">Static top</a></li>
            <li class="active"><a href="../res">Fixed top <span class="sr-only">(current)</span></a></li>
          </ul>
        </div><!--/.nav-collapse -->
      </div>
    </nav>

    <div class="container">

      <ol class="breadcrumb">
        <li><a href="#">主页</a></li>
        <li class="active">控制台</li>
      </ol>

      <div class="panel panel-default">
        <div class="panel-heading" style="padding: 6px 15px;">
          <div class="row">
            <div class="col-xs-4" style="line-height: 30px;">
              员工列表
            </div>
            <div class="col-xs-8 text-right panel-toolbar">
              <button type="button" class="btn btn-success btn-sm">
                <span class="glyphicon glyphicon-plus" aria-hidden="true"></span> 添加员工
              </button>
              <button type="button" class="btn btn-success btn-sm">
                <span class="glyphicon glyphicon-open" aria-hidden="true"></span> 导入员工
              </button>
            </div>
          </div>
        </div>
        <div class="panel-body">

          <div class="table-search" style="padding: 0 10px 15px;">
            <form class="form-inline text-center">
              <div class="form-group">
                <select class="form-control" id="selecttest">
                  <option>&nbsp;&nbsp;&nbsp;&nbsp;所有</option>
                  <option>员工名称</option>
                  <option>员工电话</option>
                  <option>员工备注</option>
                </select>
              </div>

              <div class="form-group">
                <input type="email" class="form-control keyword" id="customer-keyword" placeholder="请输入搜索内容...">
              </div>
              <button type="submit" class="btn btn-success">
                <span class="glyphicon glyphicon-search" aria-hidden="true"></span> 搜索
              </button>
            </form>
          </div>

          <div class="data-table-wrap" style="border:1px solid #ddd;">
            <table class="table table-hover table-non-border">
              <thead>
              <tr>
                <th>序号</th>
                <th>账号</th>
                <th>姓名</th>
                <th>手机号码</th>
                <th>QQ</th>
                <th>邮箱</th>
                <th>微信</th>
                <th width="100px">操作</th>
              </tr>
              </thead>
              <tbody>
              	<c:if test="${not empty employeeList }">
              		<c:forEach var="employee" items="${employeeList.list }" varStatus="vs">
		                <tr data-row-id="1">
		                  <td>${vs.count }</td>
		                  <td>${employee.account }</td>
		                  <td>${employee.name }</td>
		                  <td>${employee.phone }</td>
		                  <td>${employee.qq }</td>
		                  <td>${employee.email }</td>
		                  <td>${employee.weixin }</td>
		                  <td class="operation">
		                    <a href="javascript:;"class="btn btn-link btn-sm">
		                      <span class="glyphicon glyphicon-search" aria-hidden="true"></span> 查看
		                    </a>
		                    <a href="javascript:;"class="btn btn-link btn-sm">
		                      <span class="glyphicon glyphicon-edit" aria-hidden="true"></span> 修改
		                    </a>
		                    <div class="dropdown inline-block">
		                      <a href="javascript:;" class="btn btn-link btn-sm dropdown-toggle" data-toggle="dropdown">
		                        更多 <span class="caret"></span>
		                      </a>
		                      <ul class="dropdown-menu">
		                        <li><a href="#">导出</a></li>
		                        <li><a href="#">拨打电话</a></li>
		                        <li><a href="#">联系人信息</a></li>
		                      </ul>
		                    </div>
		                  </td>
		                </tr>
                	</c:forEach>
              	</c:if>
              	<c:if test="${empty employeeList }">
              		
              	</c:if>
                
              </tbody>
            </table>
          </div><!-- /table -->

          <div class="row pagination-wrap">
              <div class="col-sm-6 pagination-info">
                当前第1页/总计100页(1000行),每页显示
                <select name="" id="" class="form-control page-size">
                  <option value="">10</option>
                  <option value="">20</option>
                  <option value="">50</option>
                  <option value="">100</option>
                  <option value="">200</option>
                  <option value="">500</option>
                </select>
                行

                &nbsp;&nbsp;<input type="text" class="form-control jump-input"/>
                <button class="btn btn-default btn-sm jump-btn">GO</button>

              </div>
              <div class="col-sm-6 pagination-page">
                <nav>
                  <ul class="pagination">
                    <li class="disabled"><a href="#" title="首页">«</a></li>
                    <li class="disabled"><a href="#">‹</a></li>
                    <li class="active"><a href="#">1 <span class="sr-only">(current)</span></a></li>
                    <li><a href="${pageContext.request.contextPath}/employee/list?pageIndex=2&pageSize=10">2</a></li>
                    <li><a href="${pageContext.request.contextPath}/employee/list?pageIndex=3&pageSize=10">3</a></li>
                    <li><a href="${pageContext.request.contextPath}/employee/list?pageIndex=4&pageSize=10">4</a></li>
                    <li><a href="${pageContext.request.contextPath}/employee/list?pageIndex=5&pageSize=10">5</a></li>
                    <li><a href="${pageContext.request.contextPath}/employee/list?pageIndex=6&pageSize=10">6</a></li>
                    <li><a href="${pageContext.request.contextPath}/employee/list?pageIndex=7&pageSize=10">7</a></li>
                    <li><a href="${pageContext.request.contextPath}/employee/list?pageIndex=8&pageSize=10">8</a></li>
                    <li><a href="#">›</a></li>
                    <li><a href="#">»</a></li>
                  </ul>
                </nav>
              </div>

<p:page pagination="${employeeList}" url="${pageContext.request.contextPath}/employee/list"/>

${employeeList }



          </div><!-- pagination end-->


        </div>
      </div>


    </div> <!-- /container -->


    <!-- Bootstrap core JavaScript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="${pageContext.request.contextPath}/res/plugins/jquery/jquery-2.2.0.min.js"></script>
    <script src="${pageContext.request.contextPath}/res/plugins/bootstrap/js/bootstrap.min.js"></script>
    <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
    <script src="${pageContext.request.contextPath}/res/plugins/bootstrap/js/ie10-viewport-bug-workaround.js"></script>
    <script src="${pageContext.request.contextPath}/res/plugins/select2/js/select2.full.js"></script>

  </body>
</html>
